@import "../utils";

.load-block {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    moz-align-items: center;
    align-items: center;
    -webkit-animation: fin .25s;
    animation: fin .25s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    &.fade-out {
        animation: fout .25s;
        -webkit-animation: fout .25s;
    }
    .load {
        width: 300px;
        padding: 20px 30px;
        border-radius: 10px;
        background-color: rgba(85, 85, 85, .9);
        i {
            position: relative;
            display: inline-block;
            width: 72px;
            height: 72px;
            vertical-align: middle;
            background: url('../images/common/loading.png') no-repeat center;
            background-size: contain;
            backface-visibility: hidden;
            -webkit-animation: gif 1.2s infinite linear;
            animation: gif 1.2s infinite linear;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            margin-left: 20px;
            color: #f2f2f2;
            font-size: 20px;
        }
        @-webkit-keyframes gif {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(359deg);
                -moz-transform: rotate(359deg);
                transform: rotate(359deg);
            }
        }
        @keyframes gif {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(359deg);
                -moz-transform: rotate(359deg);
                transform: rotate(359deg);
            }
        }
    }
}

@keyframes fin {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}